<template>
  <div class="app-wrapper">
    <!-- 固定导航栏（保留四个核心模块，添加更多菜单） -->
    <el-header class="header" :class="{ scrolled }">
      <div class="logo">
        <img
          src="/src/assets/images/4a3ece7aca9c3eee3c352f9b5ec3e6a8.jpg"
          alt="Logo"
          class="logo-img"
        />
        <span class="title">AI辅助学习系统</span>
      </div>

      <!-- 桌面端导航（保留四个核心模块，添加更多菜单） -->
      <el-menu
        mode="horizontal"
        :default-active="activeMenu"
        class="nav-menu"
        @select="handleMenuSelect"
      >
        <el-menu-item index="english">英语模块</el-menu-item>
        <el-menu-item index="math">数学模块</el-menu-item>
        <el-menu-item index="politics">思政模块</el-menu-item>
        <el-menu-item index="info">信息模块</el-menu-item>

        <!-- 更多菜单（三个点按钮） -->
        <el-sub-menu index="more">
          <template #title>
            <el-icon><i class="fa fa-ellipsis-h"></i></el-icon>
          </template>
          <el-menu-item index="about">不知名小组开发</el-menu-item>
        </el-sub-menu>
      </el-menu>

      <!-- 移动端菜单按钮 -->
      <el-button
        icon="Menu"
        class="mobile-menu-btn"
        size="large"
        circle
        @click="showMobileMenu = !showMobileMenu"
      ></el-button>
    </el-header>

    <!-- 移动端菜单（保留四个核心模块，添加更多菜单） -->
    <el-drawer
      v-model="showMobileMenu"
      direction="right"
      size="240px"
      :with-header="false"
      class="mobile-drawer"
    >
      <el-menu
        mode="vertical"
        :default-active="activeMenu"
        class="mobile-nav"
        @select="handleMenuSelect"
      >
        <el-menu-item index="english">英语模块</el-menu-item>
        <el-menu-item index="math">数学模块</el-menu-item>
        <el-menu-item index="politics">思政模块</el-menu-item>
        <el-menu-item index="info">信息模块</el-menu-item>

        <!-- 移动端更多菜单 -->
        <el-sub-menu index="mobile-more">
          <template #title>
            <span>更多</span>
            <el-icon class="el-sub-menu__icon-arrow"
              ><i class="fa fa-angle-right"></i
            ></el-icon>
          </template>
          <el-menu-item index="about">不知名小组开发</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-drawer>

    <!-- 首屏区域（完全保留） -->
    <section class="hero-section">
      <div class="hero-content" :class="{ 'fade-in': showHero }">
        <h1 class="main-title">我们是基于AI接口集成的学习系统</h1>
        <p class="sub-title">让学习更高效，让成长更清晰</p>
        <el-button
          type="primary"
          size="large"
          class="action-btn"
          @click="handleClick"
        >
          答谢
          <el-icon class="btn-icon"><i class="fa fa-arrow-right"></i></el-icon>
        </el-button>
      </div>
      <div class="hero-decoration"></div>
    </section>

    <!-- 滚动渐显内容区（完全保留） -->
    <section
      v-for="(item, idx) in sections"
      :key="idx"
      class="content-section"
      :ref="(el) => observeSection(el, idx)"
    >
      <div class="section-inner" :class="{ 'fade-in': item.visible }">
        <el-card shadow="hover" class="feature-card">
          <template #header>
            <div class="card-header">
              <el-icon :class="`icon-${item.color}`" size="32"
                ><i :class="item.icon"></i
              ></el-icon>
              <h2 class="card-title">{{ item.title }}</h2>
            </div>
          </template>
          <div class="card-body">
            <p class="card-desc">{{ item.desc }}</p>
            <el-button type="text" :class="`more-btn text-${item.color}`">
              了解更多
              <el-icon class="more-icon"
                ><i class="fa fa-angle-right"></i
              ></el-icon>
            </el-button>
          </div>
        </el-card>
      </div>
    </section>

    <!-- 页脚（完全保留） -->
    <el-footer class="footer">
      <p class="copyright">
        &copy; 2025 AI辅助学习系统 · 智能学习平台(由不知名小组开发)
      </p>
    </el-footer>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import { Menu } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
// 导航状态（完全保留）
const activeMenu = ref("english");
const showMobileMenu = ref(false);
const scrolled = ref(false);
const showHero = ref(false);

// 内容区块配置（完全保留）
const sections = reactive([
  {
    title: "英语学习",
    icon: "fa-language",
    color: "primary",
    desc: "提供词汇本，每日联系，背诵，作文等等。",
    visible: false,
  },
  {
    title: "高等数学",
    icon: "fa-calculator",
    color: "success",
    desc: "提供练习题，深入了解什么是求导等等。",
    visible: false,
  },
  {
    title: "思政知识",
    icon: "fa-book",
    color: "warning",
    desc: "提供选择题、判断题、逻辑图等等。",
    visible: false,
  },
  {
    title: "信息技术",
    icon: "fa-computer",
    color: "info",
    desc: "提供练习题库，包括选择题，编程题等。",
    visible: false,
  },
  {
    title: "综合提示",
    icon: "fa-tasks",
    color: "purple",
    desc: "我们集成了AI智能系统，提供智能提示，帮助你快速地掌握新知识。",
    visible: false,
  },
]);

// 生命周期钩子（完全保留）
onMounted(() => {
  setTimeout(() => (showHero.value = true), 600);
  window.addEventListener("scroll", handleScroll);
});

// 导航滚动效果（完全保留）
const handleScroll = () => {
  scrolled.value = window.scrollY > 30;
};
const handleClick = () => {
  ElMessage.success({
    message: "答谢贡献:(不知名小组) ",
    duration: 3000,
  });
};
// 菜单选择处理（增加对新索引的支持）
const handleMenuSelect = (index) => {
  // 忽略子菜单的索引
  if (index === "more" || index === "mobile-more") return;

  activeMenu.value = index;
  showMobileMenu.value = false;

  // 这里可以添加"不知名小组开发"的特殊处理逻辑
  if (index === "about") {
    console.log("跳转到关于页面或显示模态框");
  }
};

// 滚动渐显实现（完全保留）
const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const idx = entry.target.dataset.index;
        sections[idx].visible = true;
        observer.unobserve(entry.target);
      }
    });
  },
  { threshold: 0.25 }
);

const observeSection = (el, idx) => {
  if (el) {
    el.dataset.index = idx;
    observer.observe(el);
  }
};
</script>

<style scoped>
/* 样式完全保留（仅需微调更多菜单样式） */
.app-wrapper {
  min-height: 100vh;
  font-family: var(--el-font-family);
  overflow-x: hidden;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5vw;
  height: 70px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
}

.header.scrolled {
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-img {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  object-fit: cover;
}

.title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--el-color-primary);
  letter-spacing: 0.3px;
}

.nav-menu {
  border-bottom: none;
  gap: 2px;
}

.nav-menu .el-menu-item {
  padding: 0 20px;
  height: 70px;
  line-height: 70px;
  font-size: 15px;
  transition: all 0.2s;
}

.nav-menu .el-menu-item:hover {
  background-color: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}

/* 微调更多菜单样式 */
.nav-menu .el-sub-menu__title {
  height: 70px;
  line-height: 70px;
  padding: 0 16px;
}

.mobile-menu-btn {
  display: none;
  background-color: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}

.mobile-drawer {
  padding: 0;
}

.mobile-nav {
  height: 100%;
  padding-top: 20px;
  background-color: var(--el-color-white);
}

.mobile-nav .el-menu-item {
  height: 56px;
  line-height: 56px;
  font-size: 16px;
}

.hero-section {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e6f4ff 0%, #f0f7ff 100%);
  overflow: hidden;
}

.hero-content {
  position: relative;
  text-align: center;
  max-width: 800px;
  padding: 0 20px;
  opacity: 0;
  transform: translateY(30px);
  transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
}

.hero-content.fade-in {
  opacity: 1;
  transform: translateY(0);
}

.main-title {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 700;
  color: var(--el-color-primary);
  line-height: 1.2;
  margin-bottom: 24px;
  letter-spacing: -0.5px;
}

.sub-title {
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  color: var(--el-color-primary-dark-2);
  margin-bottom: 40px;
  line-height: 1.6;
  opacity: 0.9;
}

.action-btn {
  padding: 12px 32px;
  font-size: 16px;
  border-radius: 30px;
  background-color: var(--el-color-primary);
  border: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.action-btn:hover {
  background-color: var(--el-color-primary-dark-2);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(64, 158, 255, 0.25);
}

.btn-icon {
  margin-left: 8px;
  transition: transform 0.3s;
}

.action-btn:hover .btn-icon {
  transform: translateX(3px);
}

.hero-decoration {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(64, 158, 255, 0.15) 0%,
    transparent 70%
  );
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.content-section {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px 5vw;
  background-color: var(--el-color-white);
}

.content-section:nth-child(even) {
  background-color: var(--el-color-primary-light-9);
}

.section-inner {
  width: 100%;
  max-width: 1000px;
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.section-inner.fade-in {
  opacity: 1;
  transform: translateY(0);
}

.feature-card {
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  overflow: hidden;
}

.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--el-color-border-light);
}

.icon-primary {
  color: var(--el-color-primary);
  background-color: var(--el-color-primary-light-9);
  padding: 8px;
  border-radius: 8px;
}

.icon-success {
  color: var(--el-color-success);
  background-color: var(--el-color-success-light-9);
  padding: 8px;
  border-radius: 8px;
}

.icon-warning {
  color: var(--el-color-warning);
  background-color: var(--el-color-warning-light-9);
  padding: 8px;
  border-radius: 8px;
}

.icon-info {
  color: var(--el-color-info);
  background-color: var(--el-color-info-light-9);
  padding: 8px;
  border-radius: 8px;
}

.icon-purple {
  color: #9370db;
  background-color: rgba(147, 112, 219, 0.1);
  padding: 8px;
  border-radius: 8px;
}

.text-purple {
  color: #9370db;
}

.card-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--el-color-text-primary);
}

.card-body {
  padding: 24px 20px;
}

.card-desc {
  font-size: 1rem;
  color: var(--el-color-text-secondary);
  line-height: 1.6;
  margin-bottom: 20px;
}

.more-btn {
  padding: 0;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.more-icon {
  transition: transform 0.2s;
}

.more-btn:hover .more-icon {
  transform: translateX(3px);
}

.footer {
  text-align: center;
  padding: 30px 5vw;
  background-color: var(--el-color-white);
  border-top: 1px solid var(--el-color-border-light);
}

.copyright {
  color: var(--el-color-text-placeholder);
  font-size: 0.9rem;
  margin: 0;
}

@media (max-width: 992px) {
  .nav-menu {
    display: none;
  }

  .mobile-menu-btn {
    display: block;
  }

  .content-section {
    padding: 80px 5vw;
  }
}

@media (max-width: 600px) {
  .header {
    height: 64px;
  }

  .logo-img {
    width: 36px;
    height: 36px;
  }

  .title {
    font-size: 1.1rem;
  }

  .main-title {
    font-size: clamp(1.6rem, 5vw, 2.2rem);
    margin-bottom: 18px;
  }

  .sub-title {
    font-size: clamp(1rem, 2vw, 1.1rem);
    margin-bottom: 30px;
  }

  .action-btn {
    padding: 10px 24px;
    font-size: 15px;
  }

  .card-title {
    font-size: 1.3rem;
  }
}
</style>